import React, {useEffect, useState} from "react";
import {Input, Tabs, TabsProps} from "antd";

interface MyComponentProps {
    bpmnInstance: any;
}

import PanelClass from "./index.module.css"
import BasicInformationView from "@/components/properties-panel-extension/components/BasicInformation";
import TaskConfigurationView from "@/components/properties-panel-extension/components/TaskConfiguration";
import FormConfigurationView from "@/components/properties-panel-extension/components/FormConfiguration";
import EventConfigurationView from "@/components/properties-panel-extension/components/EventConfiguration";
import ListenerConfigurationView from "@/components/properties-panel-extension/components/ListenerConfiguration";
import ConnectionConfigurationView from "@/components/properties-panel-extension/components/ConnectionConfiguration";
import MultiInstanceConfigurationView
    from "@/components/properties-panel-extension/components/MultiInstanceConfiguration";
import ServiceConfigurationView from "@/components/properties-panel-extension/components/ServiceConfiguration";

const PanelComView: React.FC<MyComponentProps> = (prop: any) => {
    // 解析
    const {bpmnInstance} = prop
    const [nodeType, setNodeType] = useState<string>();

    useEffect(() => {
        setNodeType(bpmnInstance.bpmnElement?.businessObject?.$type)
        // console.log(bpmnInstance.bpmnElement?.businessObject?.$type, 'bpmnInstance.bpmnElement?.businessObject?.$type')
    }, [bpmnInstance.bpmnElement?.businessObject]);
    // 是否显示任务配置
    const ShowTaskConfig = () => {
        const showList = [
            'bpmn:UserTask'
        ]
        return showList.includes(nodeType)
    }
    // 是否显示连线配置
    const showSequenceConfig = () => {
        const showList = [
            'bpmn:SequenceFlow'
        ]
        return showList.includes(nodeType)
    }
    // 是否显示事件配置
    const showEventConfig = () => {
        const showList = [
            'bpmn:StartEvent',
            'bpmn:IntermediateCatchEvent',
            'bpmn:IntermediateThrowEvent',
            'bpmn:EndEvent',
            'bpmn:BoundaryEvent'
        ]
        return showList.includes(nodeType)
    }
    // 是否显示服务配置
    const showServiceConfig = () => {
        const showList = [
            'bpmn:ServiceTask'
        ]
        return showList.includes(nodeType)
    }
    // 是否显示事件配置
    const showFormConfig = () => {
        const showList = [
            'bpmn:UserTask',
            'bpmn:StartEvent'
        ]
        return showList.includes(nodeType)
    }
    // 是否显示会签配置
    const showMultiInstance = () => {
        const showList = [
            'bpmn:UserTask',
        ]
        return showList.includes(nodeType)
    }
    const items: TabsProps['items'] = [
        {
            key: 'Basic',
            label: '基础信息',
            children: <BasicInformationView bpmnInstance={bpmnInstance}/>
        },
        ...(showEventConfig() ? [
            {
                key: 'Event',
                label: '事件配置',
                children: <EventConfigurationView bpmnInstance={bpmnInstance}/>
            }] : []),
        ...(ShowTaskConfig() ? [
            {
                key: 'Task',
                label: '任务配置',
                children: <TaskConfigurationView bpmnInstance={bpmnInstance}/>
            }] : []),
        ...(showSequenceConfig() ? [
            {
                key: 'Connection',
                label: '连线配置',
                children: <ConnectionConfigurationView bpmnInstance={bpmnInstance}/>
            }] : []),

        ...(showFormConfig() ? [{
            key: 'Form',
            label: '表单配置',
            children: <FormConfigurationView bpmnInstance={bpmnInstance}/>
        }] : []),
        ...(showServiceConfig() ? [{
            key: 'Service',
            label: '服务配置',
            children: <ServiceConfigurationView bpmnInstance={bpmnInstance}/>
        }] : []),
        {
            key: 'Listener',
            label: '监听配置',
            children: <ListenerConfigurationView bpmnInstance={bpmnInstance}/>
        },
        ...(showMultiInstance() ? [
            {
                key: 'Connection',
                label: '会签配置',
                children: <MultiInstanceConfigurationView bpmnInstance={bpmnInstance}/>
            }] : []),
    ];
    return (<div className={PanelClass.PanelClass}>
        <div>
            <Tabs destroyInactiveTabPane={true} defaultActiveKey={"Basic"} centered={true} items={items}/>
        </div>
    </div>);
};

export default PanelComView;
